<template>
	<view class="contain">
		<!-- 搜索框 -->
		<view class="searchInput">
			<image class="search_icon" src="https://img-blog.csdnimg.cn/20210316161109714.png"></image>
			<input placeholder="搜索课程"/>
		</view>
		<!-- 分类 -->
		<view class="course_class">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view v-for="(item, index) in courseType" :key="index" style="margin-right: 20rpx;display: inline-block;">
					<view :class="{'course_active': item.type == currentType}" @click="changeType(item.type)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 课程信息 -->
		<view class="course_info" v-for="(item, index) in courseList" :key="index">
			<image mode="aspectFit" :src="item.imageUrl"></image>
			<view class="course_detail">
				<view>《{{item.name}}》</view>
				<view class="author">{{item.teacher}}</view>
				<view style="display: flex; align-items: center;">
					<text style="font-size: 30rpx;margin: 10rpx;color: #FF5A5F;">￥{{item.price}}</text>
					<button class="course_btn" @click="pricing(item)">单节定价</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	export default {
		data() {
			return {
				courseType: [
					{
						name: '钢琴',
						type: 0
					},{
						name: '吉他',
						type: 1
					},{
						name: '架子鼓',
						type: 2
					},{
						name: '声乐',
						type: 3
					},{
						name: '古筝',
						type: 4
					},{
						name: '非洲鼓',
						type: 5
					},{
						name: '主持',
						type: 6
					},{
						name: '尤克里里',
						type: 7
					}
				],
				courseList: '',
				currentType: 0
			}
		},
		onLoad: function(e){
			console.log(e)
			if(e.type){
				switch(e.type){
					case '钢琴':
						// 显示钢琴的课程
						this.showCourses('钢琴');
						this.currentType = 0;
						break;
					case '吉他':
						// 显示吉他课程
						this.showCourses('吉他');
						this.currentType = 1;
						break;
					case '架子鼓':
						// 显示架子鼓课程
						this.showCourses('架子鼓');
						this.currentType = 2;
						break;
					case '声乐':
						// 显示声乐课程
						this.showCourses('声乐');
						this.currentType = 3;
						break;
					case '古筝':
						// 显示古筝课程
						this.showCourses('古筝');
						this.currentType = 4;
						break;
					case '非洲鼓':
						// 显示非洲鼓课程
						this.showCourses('非洲鼓');
						this.currentType = 5;
						break;
					case '主持':
						// 显示主持课程
						this.showCourses('主持');
						this.currentType = 6;
						break;
					case '尤克里里':
						// 显示尤克里里课程
						this.showCourses('尤克里里');
						this.currentType = 7;
						break;
				}
			}
			else{
				this.showCourses('钢琴');
			}
		},
		methods: {
			pricing: function(item){
				uni.navigateTo({
					url: '../coursePricing/coursePricing?item=' + JSON.stringify(item)
				})
			},
			changeType: function(type){
				this.currentType = type;
				switch(type){
					case 0:
						// 显示钢琴的课程
						this.showCourses('钢琴');
						break;
					case 1:
						// 显示吉他课程
						this.showCourses('吉他');
						break;
					case 2:
						// 显示架子鼓课程
						this.showCourses('架子鼓');
						break;
					case 3:
						// 显示声乐课程
						this.showCourses('声乐');
						break;
					case 4:
						// 显示古筝课程
						this.showCourses('古筝');
						break;
					case 5:
						this.showCourses('非洲鼓');
						break;
					case 6:
						// 显示主持课程
						this.showCourses('主持');
						break;
					case 7:
						// 显示尤克里里课程
						this.showCourses('尤克里里');
						break;
				}
			},
			showCourses: function(type){
				db.collection('course').where({
					label: type,
					status: '已发布'
				}).get().then(res=>{
					// 获取课程的通用链接
					res.data.forEach(item => {
						cloudbase.getTempFileURL({
							fileList: [item.imageUrl]
						}).then(res => {
							let list = res.fileList[0];
							item.imageUrl = list.tempFileURL ? list.tempFileURL : item.imageUrl;
						})
					})
					this.courseList = res.data;
				})
			}
		},
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	.contain{
		margin: 10rpx 30rpx;
	}
	.searchInput{
		background-color: #fff;
		/* width: 100%; */
		height: 80rpx;
		margin-bottom: 30rpx;
		border-radius: 40rpx;
		display: flex;
		padding-left: 30rpx;
		align-items: center;
	}
	.search_icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	.course_class{
		display: flex;
		justify-content: space-between;
		margin: 0rpx 25rpx;
	}
	.course_info{
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx 0;
		border-radius: 16rpx;
		display: flex;
	}
	.course_info image{
		height: 150rpx;
		width: 150rpx;
	}
	.course_detail{
		display: flex;
		flex-direction: column;
		width: max-content;
		margin-left: 20rpx;
		width: calc(100% - 150rpx);
	}
	.author{
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #999;
	}
	.course_btn{
		background-color: #FD973F;
		color: #fff;
		font-size: 26rpx;
		border-radius: 16rpx;
		height: 58rpx;
		margin-right: 0rpx;
		line-height: 50rpx;
	}
	.course_active{
		font-weight: bold;
		border-bottom: solid 6rpx #FD973F;
	}
</style>
